* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
实现融合效果的技术要点：

1. contrast滤镜应用在融合元素的父元素（.container）上，且父元素必须设置background。
blur滤镜应用在融合元素（.circle）上。

2. blur设置图像的模糊程度，contrast 设置图像的对比度。当两者像上面那样组合时，
就会产生神奇的融合效果，你可以像使用公式一样使用这种写法。

*/

/* filter: contrast(30) 代表 3000% */
.container {
    height: 140px;
    width: 400px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: contrast(30);
}

/* border-radius: 50% 将正方形转成圆形 */
.circle {
    border-radius: 50%;
    position: absolute;
    filter: blur(10px);
}

/* alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 */
.circle-1 {
    height: 90px;
    width: 90px;
    background: #03a9f4;
    transform: translate(-50px);
    animation: 2s moving linear infinite alternate-reverse;
}

/* alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 */
.circle-2 {
    height: 60px;
    width: 60px;
    background: #0000ff;
    transform: translate(50px);
    animation: 2s moving linear infinite alternate;
}

@keyframes moving {
    0% {
        transform: translate(50px)
    }

    100% {
        transform: translate(-50px)
    }
}